<template>
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="500"
        :before-close="handleClose"
    >
        <el-form
          ref="formEl"
          style="max-width: 600px"
          :model="dataForm"
          :rules="rules"
          label-width="auto"
        >
            <el-form-item label="父节点" prop="pid">
              <el-cascader
                style="width: 100%;"
                v-model="dataForm.pid"
                :options="treeData"
                clearable
                :props="{expandTrigger: 'hover', label: 'name', value: 'id', checkStrictly: true}"
              />
            </el-form-item>
            <el-form-item label="字典名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="字典代码" prop="code">
              <el-input v-model="dataForm.code" placeholder="请输入" :disabled="isEdit" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="dataForm.status" placeholder="请选择" >
                <el-option label="启用" value="enable" />
                <el-option label="禁用" value="disable" />
              </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </div>
        </template>
    </el-dialog>
</template>

<script setup>
  import DictAPI from '@/api/system/dict.api'
  import useToggle from "@/hooks/useToggle";
  const [dialogVisible, , setDialogVisible] = useToggle();

  const emit = defineEmits(['refresh'])

  const title = ref('新增字典')
  
  const dataForm = ref({
    pid: void undefined,
    code: void undefined,
    name: void undefined,
    status: void undefined,
  })

  const rules = reactive({
    code: [
      { required: true, message: '请输入字典代码', trigger: 'blur' },
    ],
    name: [
      { required: true, message: '请输入字典名称', trigger: 'blur' },
    ],
    status: [
      { required: false, message: '请选择状态', trigger: 'change' },
    ],
  })

  const formEl = ref(null)
  const submit = async () => {
    await formEl.value.validate((valid, fields) => {
      if (valid) {
        const param = JSON.parse(JSON.stringify(dataForm.value))
        if(param.pid) param.pid = param.pid.at(-1)
       
        DictAPI.addDictType(param).then(res => {
          ElMessage.success('新增成功')
          emit('refresh')
          setDialogVisible(false)
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  const handleClose = () => {
    setDialogVisible(false);
  }

  const treeData = ref([])
  const isEdit = ref(false)
  const handleOpen = (e, row, tree) => {
    console.log(tree, 'tree');
    treeData.value = tree
    
    isEdit.value = false

    dataForm.value = {
      pid: void undefined,
      code: void undefined,
      name: void undefined,
      status: void undefined,
    }

    const { pid, id } = e
    if(pid) dataForm.value.pid = pid

    if(id) {
      isEdit.value = true
      dataForm.value = JSON.parse(JSON.stringify(row))
      title.value = '修改字典'
    } else {
      title.value = '新增字典'
    }

    setDialogVisible(true);
  }

  defineExpose({
    handleOpen
  })
</script>
